<template>
  <!-- 经纪人结佣-经纪人佣金-列表-->
  <div class="brokerComm">
    <el-form :model="typeForm" :inline="true">
      <el-form-item label="城市：" prop="cityId">
        <el-select filterable v-model="typeForm.cityId" placeholder="请选择城市" @change="geCompanyId">
          <el-option label="全部" value></el-option>
          <el-option
            v-for="({city,cityId},index) in cityOption"
            :key="index"
            :label="city"
            :value="cityId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="角色：" prop="brokerType">
        <el-select filterable v-model="typeForm.brokerType" placeholder="请选择角色">
          <el-option
            v-for="({label,value},index) in ruleOption"
            :key="index"
            :label="label"
            :value="value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="经纪公司：" prop="companyId">
        <el-select filterable v-model="typeForm.companyId" placeholder="请选择角色">
          <el-option label="全部" value></el-option>
          <el-option
            v-for="({companyName,companyId},index) in companyOption"
            :key="index"
            :label="companyName"
            :value="companyId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="经纪人：" prop="brokerNameOrPhone">
        <el-input
          v-model.trim="typeForm.brokerNameOrPhone"
          autocomplete="off"
          placeholder="请输入姓名/手机号"
        ></el-input>
      </el-form-item>
      <el-form-item label="结佣时间：">
        <el-date-picker
          v-model="typeForm.time"
          type="datetimerange"
          range-separator="——"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchList(1)" id="monitorEnter">查询</el-button>
      </el-form-item>
    </el-form>
    <tableList
      :tableData="tableData"
      :tableInfos="tableInfos"
      :tableFormatter="tableFormatter"
      :tableChangeBtns="tableChangeBtns"
      :hasSera="true"
      :showSummary="true"
      :summaryMethod="summaryMethod"
    ></tableList>
    <el-pagination
      layout="total, sizes, prev, pager, next, jumper"
      style="margin-top:30px"
      :current-page.sync="pageNum"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :total="totalSize"
    ></el-pagination>
  </div>
</template>

<script type="text/ecmascript-6">
import api from "@/api/apiPath";
import utils from "@/common/utils.js";
import tableList from "../../common/tableList";
export default {
  components: {
    tableList
  },
  data() {
    return {
      pageNum: 1,
      pageSize: 10, //每页几条
      totalSize: 0,
      tableData: [],
      tableInfos: [
        { label: "城市", prop: "cityName" },
        { label: "角色", prop: "brokerType" },
        { label: "经纪公司", prop: "companyName" },
        { label: "姓名", prop: "brokerName" },
        { label: "手机号", prop: "brokerPhone" },
        { label: "结佣笔数", prop: "brokerageNum" },
        { label: "经纪人应结佣金额（元）", prop: "brokerageAmount" },
        { label: "税费（元）", prop: "brokerageTaxation" },
        { label: "应付款金额（元）", prop: "brokeragePayAmount" },
        { label: "操作", prop: "changeBtn" }
      ],
      ruleOption: [
        { label: "网络推客", value: "0" },
        { label: "职业经纪人", value: "3" },
        { label: "经纪公司", value: "5" }
      ],
      cityOption: [],
      companyOption:[],
      typeForm: {
        cityId: "",
        brokerType: "0",
        brokerNameOrPhone: "",
        time: ["", ""],
        companyId:'',
      },
      totalRows: {},
      tableChangeBtns: [{ label: "成交详情", type: "view", fn: this.view }],
      firstLoad: true
    };
  },
  created() {},
  mounted() {},
  methods: {
    //获取经纪公司id
    geCompanyId(cityId){
      this.typeForm.companyId = "";
      this.companyOption = [];
      if(!cityId) {return;}
      this.axios.post(api.getCompanyIdBycityId,{cityId:cityId}).then(res => {
        if (res.data.code == 200) {
         this.companyOption = res.data.data;
        }
      });
    },
    tableFormatter(prop, val) {
      let moneyFormatter = [
        "brokerageAmount",
        "brokerageTaxation",
        "brokeragePayAmount"
      ];
      if (moneyFormatter.includes(prop)) {
        return !val ? "0.00" : utils.formatMoney(val);
      }
      if(prop === "brokerPhone"){
        return utils.formatPhoneNumber(val) || "——";
      }
      let formaMap = {
        brokerType: {"0":"网络推客","3":"职业经纪人","5":"经纪公司"}
      };
      return formaMap[prop] ? formaMap[prop][val] || "——" : val || "——";
    },
    summaryMethod() {
      return this.totalRows;
    },
    searchList(pageNum) {
      this.typeForm.time = this.typeForm.time || [];
      let strDate = this.timeString(this.typeForm.time[0]);
      let endDate = this.timeString(this.typeForm.time[1]);
      let param = {
        pageNum: pageNum || this.pageNum,
        pageSize: this.pageSize,
        cityId: this.typeForm.cityId,
        brokerType: this.typeForm.brokerType,
        brokerNameOrPhone: this.typeForm.brokerNameOrPhone,
        companyId:this.typeForm.companyId,
        strDate: strDate,
        endDate: endDate
      };
      this.axios.post(api.getBrokerBrokerageHomePage, param).then(res => {
        if (res.data.code == 200) {
          this.tableData = res.data.data.rows;
          this.totalRows = res.data.data.totalRows || {};
          this.totalSize = res.data.data.total;
        }
      });
    },
    //成交详情
    view(type,idx,row) {
      this.typeForm.time = this.typeForm.time || [];
      let strDate = this.timeString(this.typeForm.time[0]);
      let endDate = this.timeString(this.typeForm.time[1]);
      let thisData = row;

      this.$router.push({
        path: "/brokerDetail",
        query: {
          cityName: thisData.cityName,
          //cityId: thisData.cityId,
          brokerType:thisData.brokerType,
          brokerName:thisData.brokerName,
          companyName:thisData.companyName,
          brokerId:thisData.brokerId,
          strDate: strDate,
          endDate: endDate
        }
      });
    },
    handleCurrentChange() {
      this.searchList();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.searchList(1);
    },
    getCitys() {
      this.axios.post(api.CITYLIST).then(res => {
        if (res.data.code == 200) {
          this.cityOption = res.data.data.cityList;
        }
      });
    },
    timeString(time) {
      if (!time) return "";
      return utils.getTimeString(time).slice(0, 10);
    }
  },
  computed: {},
  props: ["active"],
  watch: {
    active(val) {
      if (val === "brokerComm" && this.firstLoad) {
        this.firstLoad = false;
        this.searchList();
        this.getCitys();
      }
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus"></style>
